<!DOCTYPE html>
<html lang="en">
<head>
    <title>住院记录</title>
    <titleType style="display: none;">yjjList</titleType>
    <%- include('../../_global/baseLibs') %>
    <script src="/static/lib/forweb.js"></script>
    <script src="/static/js/aboutPay.js"></script>
    <script src="/quickJs/scripts/swiper/3.4.2/js/swiper.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/payment.css">
     <script src="/quickJs/scripts/common/md5.js"></script>

</head>
<style>
    .hospital-detail .hospital-jj-box .text-box span.yellow {
        margin-left: 0.5rem !important;
    }
</style>
<script type="text/javascript">

</script>

<body>

<header class="header-box fixed grey">
    <div class="header-content">
        <div class="left-tool">
            <a class="back" href="javascript:void(0);"><i class="iconfont icon-back"></i></a>
        </div>
        <div class="title">住院记录</div>
    </div>
</header>
<section class="page-wrap hospital-detail" style="width: 100%;position: absolute;">
    <div id="ListTabBox">
        <div class="tab active" id="allBill" index="0">
        </div>

    </div>
</section>




</body>

</html>
<script type="text/html" id="Tpl">
    {{each data}}
    <ul class="bilsContent">
        <li> {{$value.a}}</li>
        <li><span class="grayFont">预交金额:</span>{{$value.b}}</li>
        <li class="payInfo"><div><span class="grayFont">余额:</span>  {{$value.c}}</div>
            <div><span  class="grayFont">住院总费用:</span> {{$value.d}}</div>
        </li>
        <li><span id="display{{$index}}" onclick="displayDrug({{$index}})">查看详情   </span>
        </li>
    </ul>
    <div class="DrugList hide" id="DrugList{{$index}}">
           <ul class=" detailList">
               <li class="cost-detail">费用明细项</li>
               <li class="meals">饮食费</li>
           </ul> 
           <div class="table-box">
               <table>
                   <tr>
                       <th>项目名称</th>
                       <th>单位</th>
                       <th>数量</th>
                       <th>单价</th>
                   </tr>
                   <tr>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                   </tr>
               </table>
           </div>
    </div>
    {{/each}}
</script>
<script>
    //详情显示和隐藏
    function displayDrug(index){
        if($("#DrugList"+index) && $("#DrugList"+index).hasClass('hide')){
            $("#DrugList"+index).removeClass("hide");
            $("#display"+index)[0].innerHTML = "收起";
        }else{
            $("#DrugList"+index).addClass("hide");
            $("#display"+index)[0].innerHTML = "查看详情";
        }
    }
    var page_hospitalListing = (function($, page_hospitalListing) {
        /**加载数据*/
        function initAllData() {
            var arr =[
                {
                    a:"2018-03-25",
                    b:"上海复旦大学附属中山医院",
                    c:"10000.00元",
                    d:"0.00",
                    e:"20000",
                },
                {
                    a:"2017-03-01",
                    b:"上海复旦大学附属中山医院",
                    c:"2000.00",
                    d:"0.00",
                    e:"1200",
                },
            ];

            if(arr.length>0){
                var data = template("Tpl", {data:arr});

                $('#allBill').append(data);
            }

        }



        var cfg_def = {
            initAllData: initAllData,
        }

        page_hospitalListing.init = function(cfg){
            $.extend(page_hospitalListing, cfg_def, cfg);
            page_hospitalListing.initAllData();

        }

        return page_hospitalListing;
    })(jQuery, {});
    
</script>



